<!--
 * @Description: 首页组件
 * @Author: hai-27
 * @Date: 2020-02-07 16:23:00
 * @LastEditors: hai-27
 * @LastEditTime: 2020-02-27 13:36:12
 -->
<template>
    <div class="home" id="home" name="home">
        <!-- 轮播图 -->
        <div class="block">
            <el-carousel height="460px">
                <el-carousel-item v-for="item in carousel" :key="item.id">
                    <el-image style="width: 100%;" :src="item.fileUrl" :alt="item.id" fit="contain"></el-image>
                </el-carousel-item>
            </el-carousel>
        </div>
        <!-- 轮播图END -->
        <div class="main-box">
            <div class="main">

                <!-- 时事新闻展示区域 -->
                <div class="nows">
                    <div class="box-hd">
                        <div class="title">时事新闻</div>
                    </div>
                    <div v-for="item in newsList" :key='item.id'>
                        <el-divider></el-divider>
                        <el-row :gutter="20">
                            <el-col :span="20">
                                <div class="grid-content bg-purple">
                                    <el-button @click="goToDetail(item.id)" class="btn" type="text">{{item.title}}
                                    </el-button>
                                </div>
                            </el-col>
                            <el-col :span="4">
                                <div class="grid-content bg-purple">{{item.createTime|timestampToTime}}</div>
                            </el-col>
                        </el-row>
                    </div>
                    <el-row :gutter="20">
                        <el-col :span="12" :offset="6">
                            <div class="grid-content bg-purple" style="text-align: center">
                                <router-link to="/news">查看更多</router-link>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <!-- 时事新闻展示区域END -->

                <!-- 资源状况展示区域 -->
                <div class="appliance">
                    <div class="box-hd">
                        <div class="title">资源状况</div>
                    </div>
                    <div v-for="item in resourceList" :key='item.id'>
                        <el-divider></el-divider>
                        <el-row :gutter="20">
                            <el-col :span="20">
                                <div class="grid-content bg-purple">
                                    <el-button @click="goToDetail(item.id)" class="btn" type="text">{{item.title}}
                                    </el-button>
                                </div>
                            </el-col>
                            <el-col :span="4">
                                <div class="grid-content bg-purple">{{item.createTime|timestampToTime}}</div>
                            </el-col>
                        </el-row>
                    </div>
                    <el-row :gutter="20">
                        <el-col :span="12" :offset="6">
                            <div class="grid-content bg-purple" style="text-align: center">
                                <router-link to="/resource">查看更多</router-link>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <!-- 资源状况展示区域END -->

                <!-- 先进技术展示区域 -->
                <div class="accessory">
                    <div class="box-hd">
                        <div class="title">先进技术</div>
                    </div>
                    <div v-for="item in technology" :key='item.id'>
                        <el-divider></el-divider>
                        <el-row :gutter="20">
                            <el-col :span="20">
                                <div class="grid-content bg-purple">
                                    <el-button @click="goToDetail(item.id)" class="btn" type="text">{{item.title}}
                                    </el-button>
                                </div>
                            </el-col>
                            <el-col :span="4">
                                <div class="grid-content bg-purple">{{item.createTime|timestampToTime}}</div>
                            </el-col>
                        </el-row>
                    </div>
                    <el-row :gutter="20">
                        <el-col :span="12" :offset="6">
                            <div class="grid-content bg-purple" style="text-align: center">
                                <router-link to="/technology">查看更多</router-link>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <!-- 先进技术展示区域END -->

                <!-- 先进设备展示区域 -->
                <div class="accessory">
                    <div class="box-hd">
                        <div class="title">先进设备</div>
                    </div>
                    <div v-for="item in equipment" :key='item.id'>
                        <el-divider></el-divider>
                        <el-row :gutter="20">
                            <el-col :span="20">
                                <div class="grid-content bg-purple">
                                    <el-button @click="goToDetail(item.id)" class="btn" type="text">{{item.title}}
                                    </el-button>
                                </div>
                            </el-col>
                            <el-col :span="4">
                                <div class="grid-content bg-purple">{{item.createTime|timestampToTime}}</div>
                            </el-col>
                        </el-row>
                    </div>
                    <el-row :gutter="20">
                        <el-col :span="12" :offset="6">
                            <div class="grid-content bg-purple" style="text-align: center">
                                <router-link to="/equipment">查看更多</router-link>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <!-- 先进设备展示区域END -->
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                carousel: "", // 轮播图数据
                newsList: [],
                resourceList: [],
                technology: [],
                equipment: []
            };
        },
        watch: {},
        created() {
            // 获取轮播图数据
            let that = this
            this.$axios
                .post("/api/file/getCarousel", {})
                .then(res => {
                    that.carousel = res.data.data;
                })
                .catch(err => {
                    return Promise.reject(err);
                });
            this.$axios
                .post("/api/type/query", {})
                .then(res => {
                    for (let i = 0; i < res.data.data.length; i++) {
                        if (res.data.data[i].id === 1) {
                            that.newsList = res.data.data[i].informationList
                        }
                        if (res.data.data[i].id === 2) {
                            that.resourceList = res.data.data[i].informationList
                        }
                        if (res.data.data[i].id === 3) {
                            that.technology = res.data.data[i].informationList
                        }
                        if (res.data.data[i].id === 4) {
                            that.equipment = res.data.data[i].informationList
                        }
                    }
                    console.log(that.newsList)
                })
                .catch(err => {
                    return Promise.reject(err);
                });

        },
        methods: {
            goToDetail(id) {
                this.$router.push(
                    {
                        path:'/info/details',
                        query:{
                            id: id
                        }
                    })
            }
        }
    };
</script>
<style scoped>
    @import "../assets/css/index.css";

    .grid-content {
        border-radius: 4px;
        min-height: 20px;
    }

    .grid-content .btn {
        font-size: 18px;
    }
</style>
